<template>
  <div class="allocation-unit">
    <el-dialog title="分配单位" :visible.sync="showDialog" width="37%" :before-close="handleClose"
      @update:showDialog="toggleDialog">
      <el-form label-width="100px" ref="form" :model="form">
        <el-form-item label="单位：">
          <el-input v-model="form.unit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">确定</el-button>
          <el-button @click="handleClose">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { distributeUnit } from "@/api/businessSupport/businessManagement.js";
export default {
  props: {
    //弹窗显、隐
    showDialog: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      form: {},
    };
  },
  methods: {
    // 弹窗关闭
    handleClose() {
      this.toggleDialog();
    },
    toggleDialog(visible = false) {
      this.$emit("update:showDialog", visible);
    },
    async submitForm() {
      const result = await distributeUnit({
        id: this.id,
        unit: this.form.unit,
      });
      this.$message({
        type: "success",
        message: result.msg,
      });
      this.handleClose();
      this.$emit("updateList");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input {
  width: 300px;
}
</style>